<template>
  <div class="show_diary">
    <span class="pull-right">
      <router-link class="btn btn-primary" v-bind:to="'/Diary/Edit/'+diary.id">
        编辑
      </router-link>
      <button class="btn btn-danger" v-on:click="deleteDiary(diary.id)">删除</button>
      <router-link to="/Diary/showDiary" class="btn btn-warning">返回</router-link>
    </span>
    <div class="single_diary">
      <h1>{{diary.title}}</h1>
      <p class="diary_type">日记类型：{{diary.type}}</p>
      <p class="time">{{diary.value2}}</p>
      <p>{{diary.body}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SingleDiary',
  data () {
    return {
      diary: {}
    }
  },
  methods: {
    fetchDiarys (diaryid) {
      this.$http.get('http://localhost:3000/diarys/' + diaryid)
        .then(function (data) {
          console.log(data)
          this.diary = data.body
        })
    },
    deleteDiary (id) {
      // console.log(id);
      this.$http.delete('http://localhost:3000/diarys/' + id)
        .then((response) => {
          this.$router.push({path: '/Diary/showDiary', query: {alert: '日记删除成功!'}})
        })
    }
  },
  created () {
    this.fetchDiarys(this.$route.params.id)
  }
}
</script>

<style scoped>
  .show_diary{
    background: #f4f4f4;
  }
  .single_diary{
    max-width: 960px;
    padding: 100px 50px;
    background: white;
    margin: 40px auto;
    border: 1px dotted #aaa;
  }
  h1{
    font-size: 18px;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 0;
    font-weight: bold;
    color: #66cdaa;
  }
  .diary_type{
    color: mediumaquamarine;
    font-size: 15px;
    text-align: left;
    padding-bottom: 5px;
  }
  .time{
    font-size: 15px;
    text-align: right;
    padding-bottom: 5px;
    color: #428eda;
  }
</style>
